<template>
  <div class="waybillDetails tab-fixed">
    <el-tabs v-model="activeName" lazy>
      <el-tab-pane label="运单详情" name="first" class="padding">
        <!-- 订单状态 -->
        <ProgressBar v-if="progress.length > 0" :progress-list="progress" />

        <!-- 渠道信息 -->
        <section class="channelInfo margin-top">
          <el-row :gutter="20" class="flex">
            <el-col :span="12" class="channelInfo-left">
              <el-card v-if="commentInfo.show" class="margin-bottom">
                <div slot="header" class="clearfix">
                  <span class="title-icon">运单评价</span>
                </div>
                <el-rate
                  v-model="rateInfo.starLevel"
                  show-text
                  :texts="texts"
                  :disabled="
                    commentInfo.info && commentInfo.info.id ? true : false
                  "
                  @change="changeRate"
                />

                <div
                  v-if="commentInfo.info && commentInfo.info.id"
                  class="margin-top"
                >
                  <template v-for="(item, index) in commentInfo.info.types">
                    <el-tag :key="index">{{ item.typeName }}</el-tag>
                  </template>

                  <div class="comment-main">
                    <div
                      v-for="(item, index) in commentInfo.list"
                      :key="index"
                      class="flex align-center justify-between margin-bottom-sm"
                    >
                      <div>
                        <span>
                          {{ item.isCustomer === 1 ? '我' : item.cusername }}：
                        </span>
                        <span>{{ item.record }}</span>
                      </div>
                      <span>{{ item.cdate }}</span>
                    </div>
                  </div>
                </div>
                <div v-else>
                  <div class="text-right">
                    <template
                      v-for="(item, index) in rateList[rateInfo.starLevel]"
                    >
                      <el-button
                        :key="index"
                        type="warning"
                        size="small"
                        :class="{
                          'el-button-isval': item.isFlag,
                          'el-button-isval-f': !item.isFlag
                        }"
                        @click="selectAppraisedLabel(index, rateInfo.starLevel)"
                      >
                        {{ item.typeName }}
                      </el-button>
                    </template>
                  </div>
                </div>

                <div>
                  <el-input
                    v-model="rateInfo.text"
                    type="textarea"
                    class="margin-tb"
                    placeholder=""
                  />
                  <div class="text-left">
                    <el-button type="primary" size="mini" @click="saveRate">{{
                      commentInfo.info && commentInfo.info.id
                        ? '添加回复'
                        : '提交评价'
                    }}</el-button>
                  </div>
                </div>
                <!-- <div v-html="commentInfo.info"></div> -->
                <!-- </el-col>
            </el-row> -->
              </el-card>
              <el-card>
                <div slot="header" class="clearfix">
                  <span class="title-icon">渠道信息</span>
                </div>
                <el-row>
                  <el-col :span="8">起运地：</el-col>
                  <el-col :span="16">{{
                    publicData.shippingAddressMap[waybillInfo.loadingPort]
                  }}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">目的国家：</el-col>
                  <el-col :span="16">{{
                    publicData.countryMap[waybillInfo.countryId]
                  }}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">实重(KG)：</el-col>
                  <el-col :span="16">{{
                    waybillInfo.customerActualWeight
                  }}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">体积(CBM)：</el-col>
                  <el-col :span="16">{{ waybillInfo.customerVolume }}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">渠道能力：</el-col>
                  <el-col :span="16">
                    <span
                      v-for="item in waybillInfo.channelCapacity"
                      :key="item"
                    >
                      {{ publicData.channelAbilitysMap[item] }}
                    </span>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">特殊产品：</el-col>
                  <el-col :span="16">
                    <span
                      v-for="item in waybillInfo.specialProduct"
                      :key="item"
                    >
                      {{ publicData.specialProductsMap[item] }}
                    </span>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">包税：</el-col>
                  <el-col :span="16">{{
                    yesNo[waybillInfo.isTaxFarming]
                  }}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">目的仓库类型：</el-col>
                  <el-col :span="16">{{
                    publicData.stockTypeMap[waybillInfo.purposeWarehouseType]
                  }}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">交货条款：</el-col>
                  <el-col :span="16">{{ waybillInfo.deliveryTerms }}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">报关方式：</el-col>
                  <el-col :span="16">{{
                    yesNo[waybillInfo.isCustomerDeclaration]
                  }}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">渠道：</el-col>
                  <el-col :span="16" class="text-red">{{
                    publicData.channelMap[waybillInfo.inStockChannel]
                  }}</el-col>
                </el-row>
                <el-row v-if="waybillInfo.isTaxFarming == 0 && waybillInfo.isPVA !== '' &&waybillInfo.isPVA !== null ">
                  <el-col
                    :span="8"
                  >Postponed VAT Accounting/增值税递延：</el-col>
                  <el-col :span="16">{{
                    waybillInfo.isPVA ? '是' : '否'
                  }}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">是否购买保险：</el-col>
                  <el-col :span="16">{{
                    yesNo[waybillInfo.isBuyInsurance]
                  }}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">预计入仓时间：</el-col>
                  <el-col :span="16">{{ waybillInfo.etInStock }}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">到仓件数：</el-col>
                  <el-col :span="16">{{
                    waybillInfo.arrivalTotalPackages
                  }}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">交货方式：</el-col>
                  <el-col :span="16">{{
                    waybillInfo.selfDelivered ? '九方提货' : '客户自送'
                  }}</el-col>
                </el-row>
                <el-row
                  v-if="
                    waybillInfo.countryId == 339 &&
                      waybillInfo.isTaxFarming == 0
                  "
                >
                  <el-col :span="8">是否委托制作中澳证：</el-col>
                  <el-col :span="16">{{
                    waybillInfo.isChinaAustraliaCard ? '是' : '否'
                  }}</el-col>
                </el-row>
                <el-row
                  v-if="[700, 800].includes(waybillInfo.purposeWarehouseType)"
                >
                  <el-col :span="8">入仓号/入仓预约链接：</el-col>
                  <el-col :span="16">{{
                    waybillInfo.deliveryNumber
                  }}</el-col>
                </el-row>

                <el-row>
                  <el-col :span="8">备注：</el-col>
                  <el-col :span="16">{{ waybillInfo.customerRemark }}</el-col>
                </el-row>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card class="margin-bottom-sm">
                <div slot="header" class="clearfix">
                  <span class="title-icon">发件人信息</span>
                </div>
                <el-row>
                  <el-col :span="12">
                    <el-row>
                      <el-col :span="4">公司名：</el-col>
                      <el-col :span="20">{{
                        waybillInfo.senderCompany
                      }}</el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="12">
                    <el-row>
                      <el-col :span="5">公司名(中)：</el-col>
                      <el-col :span="19">{{
                        waybillInfo.senderCompanyCN
                      }}</el-col>
                    </el-row>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="4">地址：</el-col>
                  <el-col :span="20">{{ waybillInfo.senderAdress }}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="2">联系人：</el-col>
                  <el-col :span="6">{{ waybillInfo.senderLinkMan }}</el-col>
                  <el-col :span="2">电话：</el-col>
                  <el-col :span="6">{{ waybillInfo.senderPhone }}</el-col>
                  <el-col :span="2">邮编：</el-col>
                  <el-col :span="6">{{ waybillInfo.senderZipCode }}</el-col>
                </el-row>
              </el-card>
              <el-card class="margin-bottom-sm">
                <div slot="header" class="clearfix">
                  <span class="title-icon">派送地址</span>
                </div>
                <el-row>
                  <el-col :span="4">公司名：</el-col>
                  <el-col :span="20">{{ waybillInfo.dispatcher }}</el-col>
                </el-row>

                <div v-if="waybillInfo.purposeWarehouseType != 400">
                  <el-row>
                    <el-col :span="4">地址：</el-col>
                    <el-col :span="20">{{
                      waybillInfo.dispatchAddress
                    }}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="4">地址2：</el-col>
                    <el-col :span="20">{{
                      waybillInfo.dispatchAddress2
                    }}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="2">仓库代码：</el-col>
                    <el-col :span="6">{{
                      waybillInfo.dispatchAddressCode
                    }}</el-col>
                    <el-col :span="2">城市：</el-col>
                    <el-col :span="6">{{ waybillInfo.dispatchCity }}</el-col>
                    <el-col :span="2">州：</el-col>
                    <el-col :span="6">{{
                      waybillInfo.dispatchProvince
                    }}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="3">联系人：</el-col>
                    <el-col :span="3">{{ waybillInfo.dispatchLinkMan }}</el-col>
                    <el-col :span="3">电话：</el-col>
                    <el-col :span="3">{{ waybillInfo.dispatchPhone }}</el-col>
                    <el-col :span="3">邮编：</el-col>
                    <el-col :span="3">{{ waybillInfo.dispatchZipCode }}</el-col>
                    <el-col :span="3">邮箱：</el-col>
                    <el-col :span="3">{{ waybillInfo.dispatchEmail }}</el-col>
                  </el-row>
                  </d>
                </div></el-card>
              <el-card>
                <div slot="header" class="clearfix">
                  <span class="title-icon">进口商信息</span>
                </div>
                <el-row>
                  <el-col :span="12">
                    <el-row>
                      <el-col :span="8">自有VAT/EORI：</el-col>
                      <el-col :span="16">{{
                        waybillInfo.isVatAndEori ? '是' : '否'
                      }}</el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="12">
                    <el-row>
                      <el-col :span="5">公司名：</el-col>
                      <el-col :span="19">{{
                        waybillInfo.importerCompanyName
                      }}</el-col>
                    </el-row>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="4">详细地址：</el-col>
                  <el-col :span="20">{{ waybillInfo.importerAddress }}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="4">联系人：</el-col>
                  <el-col :span="4">{{ waybillInfo.importerLinkMan }}</el-col>
                  <el-col :span="4">电话：</el-col>
                  <el-col :span="4">{{ waybillInfo.importerPhone }}</el-col>
                  <el-col :span="4">邮编：</el-col>
                  <el-col :span="4">{{ waybillInfo.importerZipCode }}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="4"> VAT：</el-col>
                  <el-col :span="8"> {{ waybillInfo.vat }} </el-col>
                  <el-col :span="4">EORI：</el-col>
                  <el-col :span="8">
                    {{ waybillInfo.eori }}
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
        </section>
        <!-- 费用信息 -->
        <el-card
          v-if="waybillInfo.billStatus === 1 && userInfo.clientShowFee"
          class="margin-top"
        >
          <div slot="header" class="clearfix">
            <span class="title-icon">费用信息</span>
          </div>

          <TableModule
            :table-columns="receivePayables"
            :table-data="waybillReceivePayables"
          />
        </el-card>
        <!-- 问题件 -->
        <el-card class="margin-top">
          <div slot="header" class="clearfix">
            <span class="title-icon">问题件</span>
          </div>

          <el-table
            class="table-box"
            :border="true"
            :data="questionsList"
            style="width: 100%"
            size="mini"
          >
            <el-table-column type="index" label="序号" />
            <!-- 遍历col -->
            <ex-table-column
              v-for="column in questionsTableColumns"
              :key="column.prop"
              :auto-fit="true"
              :fit-header="true"
              :prop="column.prop"
              :label="column.label"
            />
          </el-table>
        </el-card>
        <!-- 清关发票 -->
        <el-card class="margin-top">
          <div slot="header" class="clearfix">
            <span class="title-icon">清关发票</span>
          </div>
          <TableModule
            :table-columns="tableColumns"
            :table-data="liquidationInvoiceList"
          />
        </el-card>
        <!-- 装箱单 -->
        <el-card class="margin-top">
          <div slot="header" class="clearfix">
            <span class="title-icon">装箱单</span>
            <span
              v-if="waybillInfo.inStockTime && waybillInfo.shippingWay !== '99'"
              class="head-btn margin-left"
              @click="showOldPackingData = true"
            >
              查看箱单原始数据
            </span>
          </div>
          <TableModule
            :table-columns="packingTableColumns"
            :table-data="packingLists"
            :span-method-list="spanMethodList"
            :span-method-key="spanMethodKey"
          />
          <el-row
            v-if="packingLists && packingLists.length > 0 && showWarehouseInfo"
            class="padding bg-ghostwhite"
          >
            <el-col :span="5">总计</el-col>
            <el-col :span="2">实重：{{ waybillInfo.inStockActualWeight }}</el-col>
            <el-col :span="2">体积：{{ waybillInfo.inStockVolume }}</el-col>
            <el-col :span="2">体积重：{{ waybillInfo.inStockVolumeWeight }}</el-col>
            <el-col :span="2">计费重：{{ waybillInfo.inStockChargedWeight }}</el-col>
          </el-row>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="文件列表" name="second" class="padding" lazy>
        <FileList :waybill-id="waybillId" />
      </el-tab-pane>
      <el-tab-pane :label="waybillInfo.waybillNo" disabled />
      <el-tab-pane
        v-if="waybillInfo.referenceNo"
        :label="waybillInfo.referenceNo"
        disabled
      />

      <el-tab-pane
        v-if="
          waybillInfo.trackNumber ||
            waybillInfo.trackNumber2 ||
            waybillInfo.trackNumber3
        "
        disabled
      >
        <div slot="label">
          <el-tooltip class="item" effect="light" placement="bottom">
            <div slot="content">
              <div>
                {{ waybillInfo.trackNumber }}
                {{ waybillInfo.trackNumber }}
              </div>
              <div>
                {{ waybillInfo.trackNumber2 }}
                {{ waybillInfo.trackNumber }}
              </div>
              <div>
                {{ waybillInfo.trackNumber3 }} {{ waybillInfo.trackNumber }}
              </div>
            </div>
            <span>
              {{
                waybillInfo.trackNumber ||
                  waybillInfo.trackNumber2 ||
                  waybillInfo.trackNumber3
              }}
            </span>
          </el-tooltip>
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-dialog title="箱单原始数据" :visible.sync="showOldPackingData">
      <TableModule
        :table-columns="oldPackingTableColumns"
        :table-data="packingLists"
        :span-method-list="spanMethodList"
        :span-method-key="spanMethodKey"
      />
    </el-dialog>
    <div
      v-if="waybillInfo.abroadWaybillNo"
      class="abroad-btn"
      @click="goAbroad(waybillInfo.abroadWaybillNo)"
    >{{ waybillInfo.abroadWaybillNo }}</div>
  </div>
</template>

<script>
import TableModule from '@/components/TableModule'
import { clone } from '@/utils/clone'
import { compileStr, uncompileStr } from '@/utils'
const ProgressBar = () => import('@/components/ProgressBar')
const FileList = () => import('./components/FileList')
import {
  getWaybillById,
  queryQuestionsByWaybillId,
  chatrecordlist,
  customerevaluationSave,
  waybillelAddComments,
  initData,
  initWaybillState,
  queryWaybillReceive,
  getPackingList,
  querySubWaybill,
  searchOrderByWaybillNo
} from '@/api/waybill'
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'

import { customerShipperList } from '@/api/myProfile'
export default {
  components: {
    ProgressBar,
    TableModule,
    FileList
  },
  inject: ['reload'],
  props: {
    id: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      showOldPackingData: false,
      activeName: 'first',
      waybillNo: '',
      rateList: {},
      commentInfo: {
        show: false
      },
      texts: ['非常差', '差', '一般', '满意', '非常满意'],
      rateInfo: {
        starLevel: 5,
        text: ''
      },
      progress: [],
      yesNo: {
        1: '是',
        0: '否',
        32: '是',
        38: '否',
        43: '是',
        42: '否'
      },
      waybillInfo: {},
      packingLists: [],
      spanMethodList: [0, 1, 2, 3, 4, 5, 6, 7],
      spanMethodKey: 'startNumNo',
      questionsList: [],
      packingListSet: [],
      liquidationInvoiceList: [],
      waybillReceivePayables: [],
      receivePayables: [
        { prop: 'costNames', label: '费用名称' },
        { prop: 'totalCost', label: '金额' },
        { prop: 'remain', label: '未付' },
        { prop: 'currency', label: '币种' }
      ],
      packingTableColumns: [
        { prop: 'startNumNo', label: '箱号' },
        { prop: 'trackNumber', label: '追踪号' },
        { prop: 'trackType', label: '类型' },
        { prop: 'weight', label: '单箱毛重(kg)' },
        { prop: 'LWH', label: '单箱长×宽×高(cm)' },
        { prop: 'totalVolum', label: '体积' },
        { prop: 'volumeWeight', label: '体积重' },
        { prop: 'chargedWeight', label: '计费重' },
        { prop: 'sku', label: 'SKU' },
        { prop: 'declareNameCn', label: '中文品名' },
        { prop: 'num', label: '个数' }
      ],
      oldPackingTableColumns: [
        { prop: 'startNumNo', label: '箱号' },
        { prop: 'oldWeight', label: '单箱毛重(kg)' },
        { prop: 'oldLength', label: '长(cm)' },
        { prop: 'oldWidth', label: '宽(cm)' },
        { prop: 'oldHeight', label: '高(cm)' }
      ],
      questionsTableColumns: [
        { prop: 'problemType', label: '问题类型' },
        { prop: 'problemDescribe', label: '问题描述' },
        { prop: 'LWH', label: '问题进程' }
      ]
    }
  },
  computed: {
    ...mapGetters(['publicData', 'isCheckPrice', 'userInfo', 'showWarehouseInfo']),
    totalAmount() {
      let totalVolum = 0
      let volumeWeight = 0
      let chargedWeight = 0

      for (const i of this.packingLists) {
        if (i.totalVolum) {
          totalVolum =
            (Number(totalVolum) * 1000 + parseFloat(i.totalVolum) * 1000) / 1000
        }
        if (i.volumeWeight) {
          volumeWeight =
            (Number(volumeWeight) * 1000 + parseFloat(i.volumeWeight) * 1000) /
            1000
        }
        if (i.chargedWeight) {
          chargedWeight =
            (Number(chargedWeight) * 1000 +
              parseFloat(i.chargedWeight) * 1000) /
            1000
        }
      }
      return [totalVolum, volumeWeight, chargedWeight]
    },

    tableColumns() {
      let list = [
        { prop: 'shipmentId', label: 'ShipmentID' },
        { prop: 'referenceId', label: 'ReferenceID' },
        { prop: 'sku', label: 'SKU' },
        { prop: 'declareNameEn', label: '英文品名' },
        { prop: 'declareNameCn', label: '中文品名' },
        { prop: 'brand', label: '品牌' },
        { prop: 'material', label: '材质' },
        { prop: 'purpose', label: '用途' },
        { prop: 'customsCode', label: '出口报关编码' },
        { prop: 'customsClearanceCode', label: '清关编码' },
        { prop: 'asin', label: 'ASIN/销售链接' },
        { prop: 'isCharged', label: '是否带电' },
        { prop: 'model', label: '型号' },
        { prop: 'num', label: '个数' },
        { prop: 'measurementUnit', label: '单位' },
        { prop: 'perSuitNum', label: '每套个数' },
        { prop: 'purchasingPrice', label: '采购单价(RMB)' }
      ]
      const noJapList = [
        {
          prop: 'declareValue',
          label: `申报单价(${this.waybillInfo.declareValueCurrency})`
        },
        { prop: 'imgUrl', label: '图片', type: 'img' }
      ]
      const japList = [
        { prop: 'declareValue', label: 'ASIN售价' },
        { prop: 'distributionMaterialCount', label: '配送料' },
        { prop: 'productLotCount', label: '出品手数料' },
        { prop: 'imgUrl', label: '图片', type: 'img' },
        { prop: 'sellpriceScreenshot', label: '售价截图', type: 'img' },
        { prop: 'incomeScreenshot', label: '收益截图', type: 'img' }
      ]

      if (
        this.waybillInfo &&
        this.waybillInfo.liquidationInvoice &&
        this.waybillInfo.liquidationInvoice.length > 0 &&
        this.waybillInfo.liquidationInvoice.isCharged
      ) {
        list.splice(
          12,
          0,
          { prop: 'volt', label: '电压(伏特)' },
          { prop: 'milliampere', label: '电容(毫安)' },
          { prop: 'watt', label: '功率(瓦特)' }
        )
      }

      if (
        this.publicData.countryMap &&
        this.waybillInfo.countryId &&
        this.publicData.countryMap[this.waybillInfo.countryId] &&
        this.publicData.countryMap[this.waybillInfo.countryId].indexOf(
          '日本'
        ) !== -1
      ) {
        list = [...list, ...japList]
      } else {
        list = [...list, ...noJapList]
      }
      return list
    }
  },

  created() {
    // console.log('waybillId', this.waybillId)

    if (this.id) {
      this.waybillId = uncompileStr(this.id)
    }
    // console.log('this.$router.param :>> ', this.$route.params)
    // if (this.$router.param.waybillId) { this.waybillId = this.$router.param.waybillId }
    this.init()
  },
  methods: {
    refresh() {
      this.reload()
    },

    async init() {
      this.$store.dispatch('app/toggleDialog', true)
      const { data } = await getWaybillById({
        id: this.waybillId
      })
      this.waybillInfo = data.waybill
      this.waybillNo = data.waybill.waybillNo
      this.liquidationInvoiceList = data.liquidationInvoiceList
      // if (data.packingListSet) {
      //   this.packingListSet = data.packingListSet
      // }
      this.getPackingList()

      this.waybillInfo.channelCapacity = data.waybill.channelCapacity
        ? data.waybill.channelCapacity.split(',')
        : []
      this.waybillInfo.specialProduct = data.waybill.specialProduct
        ? data.waybill.specialProduct.split(',')
        : []

      // 费用信息
      this.queryWaybillReceive()

      // 问题件
      this.checkQuestionsByWaybillId()
      // if (this.waybillInfo.custoemrSenderId) {
      //   this.getCustomerShipper(this.waybillInfo.custoemrSenderId)
      // }

      // 状态栏
      const { data: progress } = await initWaybillState({ id: this.waybillId })
      this.progress = progress
      if (this.waybillInfo && this.waybillInfo.status >= 50) {
        // 评价
        this.getComment()
        initData().then(res => {
          this.rateList = res.data
        })
      }
      if (this.waybillInfo.shippingWay === '99') {
        this.getPackagesInfo()
      }
      this.$store.dispatch('app/toggleDialog', false)
    },
    async getPackagesInfo(s) {
      this.showPackages = true
      const { data } = await querySubWaybill({ waybillId: parseInt(this.waybillId) })
      if (Array.isArray(data)) {
        this.packingLists = data
        for (const i of this.packingLists) {
          if (i.length && i.width && i.height) {
            i.LWH = `${i.length} X ${i.width} X ${i.height}`
          }
        }
      } else {
        this.$message.error('获取运单入库单信息失败')
      }
    },
    async getPackingList() {
      const res = await getPackingList({ waybillId: parseInt(this.waybillId) })
      if (res.data) {
        this.packingListSet = res.data
        this.integrationPackingData()
      }
    },
    async getComment() {
      const comment = await chatrecordlist({ waybillId: this.waybillId })

      if (comment.code === 200) {
        this.commentInfo = {
          info: comment.data,
          list: comment.data2,
          show: true
        }

        this.rateInfo.starLevel = comment.data.starLevel
      } else {
        this.commentInfo = {
          info: {},
          list: [],
          show: true
        }
      }
    },
    // 计算表格合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
        const target = this.packingLists.find(
          x => x.shipmentId === row.shipmentId
        )
        return {
          rowspan: target ? target.spanArr[rowIndex] : 1,
          colspan: 1
        }
      }
    },
    async getSpanArr(obj) {
      // 数据排序，以便合并
      if (obj && obj.tableData && obj.tableData.length > 0) {
        let spanArr = []
        let pos = 0

        obj.tableData.sort(
          (a, b) =>
            a.startNumNo.slice(a.startNumNo.lastIndexOf('U') + 1) -
            b.startNumNo.slice(a.startNumNo.lastIndexOf('U') + 1)
        )
        spanArr = []
        pos = 0
        for (var i = 0; i < obj.tableData.length; i++) {
          if (i === 0) {
            spanArr.push(1)
            pos = 0
          } else {
            // 判断当前元素与上一个元素是否相同,因合并第一个所以[0]

            if (
              obj.tableData[i]['startNumNo'] ===
              obj.tableData[i - 1]['startNumNo']
            ) {
              spanArr[pos] += 1
              spanArr.push(0)
            } else {
              spanArr.push(1)
              pos = i
            }
          }
        }
        obj.spanArr = clone(spanArr)
        obj.pos = clone(pos)
        return obj
      }
    },
    async getCustomerShipper(id) {
      const data = await customerShipperList({
        authorization: getToken()
      })

      const info = data.find(x => x.id === id)
      console.log('info :>> ', info)
      if (!info) return
      this.waybillInfo.senderAdress = info.shipperAddress
      this.waybillInfo.senderCompany = info.shipperCompany
      this.waybillInfo.senderCompanyCN = info.shipperCompanyCN
      this.waybillInfo.senderLinkMan = info.shipperAttn
      this.waybillInfo.senderPhone = info.shipperPhone
      this.waybillInfo.senderZipCode = info.shipperZipCode

      // console.log('this.waybillInfo :>> ', this.waybillInfo)
    },
    //  整合箱单信息
    integrationPackingData() {
      const packingList = []
      console.log('this.packingListSet: ', this.packingListSet)
      for (const i of this.packingListSet) {
        for (const j of i.packSkuList) {
          const sku = {
            sku: j.sku,
            declareNameCn: j.declareNameCn,
            num: j.num,
            LWH: `${i.length} X ${i.width} X ${i.height}`,
            startNumNo: i.startNumNo,
            weight: i.weight,
            oldWeight: i.oldWeight,
            oldHeight: i.oldHeight,
            oldLength: i.oldLength,
            oldWidth: i.oldWidth,
            totalVolum: i.totalVolum,
            volumeWeight: i.volumeWeight,
            chargedWeight: i.chargedWeight,
            trackNumber: i.trackNumber,
            trackType: i.trackType
          }
          packingList.push(sku)
        }
      }
      this.packingLists = packingList
      console.log('this.packingLists: ', this.packingLists)
      for (const i of this.packingLists) {
        this.getSpanArr(i)
      }
    },
    async checkQuestionsByWaybillId() {
      const { data } = await queryQuestionsByWaybillId(parseInt(this.waybillId))
      // console.log('data :>> ', data)
      this.questionsList = data
    },
    async queryWaybillReceive() {
      const res = await queryWaybillReceive({ id: parseInt(this.waybillId) })
      if (res.code === 200) {
        this.waybillReceivePayables = res.data.receives
        if (this.waybillReceivePayables.length > 0) {
          for (const i of this.waybillReceivePayables) {
            i.costNames = this.publicData.configPayNameMap[i.costName]
          }
          this.waybillReceivePayables.push({
            costNames: '总计',
            totalCost: res.data.totalCost,
            remain: res.data.totalRemain,
            currency: 'RMB'
          })
        }
      }
    },
    async saveRate() {
      this.$store.dispatch('app/toggleDialog', true)
      let data = {}
      if (this.commentInfo.info && this.commentInfo.info.id) {
        data = await waybillelAddComments({
          id: this.commentInfo.info.id,
          text: this.rateInfo.text
        })
      } else {
        const types = []
        for (const i in this.rateList) {
          for (const j of this.rateList[i]) {
            if (j.isFlag) {
              console.log('j :>> ', j)
              types.push({
                id: j.id,
                typeName: j.typeName
              })
            }
          }
        }
        console.log('this.rateInfo.text :>> ', this.rateInfo.text)
        console.log('types :>> ', types)
        if (
          this.rateInfo.starLevel < 4 &&
          (types.length === 0 || !this.rateInfo.text)
        ) {
          this.$message.error('问题类型、评价内容必填')
          this.$store.dispatch('app/toggleDialog', false)
          return
        }

        data = await customerevaluationSave({
          waybillId: this.waybillId, // 运单id
          starLevel: this.rateInfo.starLevel, // 选择的星星等级
          text: this.rateInfo.text, // 评价内容
          starLevelDescribe: this.texts[this.rateInfo.starLevel + 1],
          types: types
        })
      }
      if (data.code === 200) {
        this.$message({
          message: '提交成功',
          type: 'success'
        })
        this.rateInfo.text = ''
        this.getComment()
      } else {
        this.$message.error(data.message)
      }
      this.$store.dispatch('app/toggleDialog', false)
    },
    changeRate(val) {
      // console.log('val :>> ', val)
      for (const i in this.rateList) {
        for (const j of this.rateList[i]) {
          j.isFlag = false
        }
      }
    },
    // 点击标签
    selectAppraisedLabel(index, level) {
      if (this.rateList[this.rateInfo.starLevel][index].isFlag) {
        this.$delete(this.rateList[level][index], 'isFlag')
        this.$set(
          this.rateList[this.rateInfo.starLevel][index],
          'isFlag',
          false
        )
      } else {
        console.log('1 :>> ', this.rateList[level][index])
        this.$delete(this.rateList[level][index], 'isFlag')
        this.$set(this.rateList[level][index], 'isFlag', true)
      }
    },
    // 跳转海外仓编辑
    async goAbroad(abroadWaybillNo) {
      const data = await searchOrderByWaybillNo({
        waybillNo: abroadWaybillNo
      })

      console.log('data :>> ', data)

      if (data.datas.length === 1) {
        const routeUrl = this.$router.resolve({
          path: '/abroadWaybill/abroadWaybillEdit',
          query: { id: compileStr(data.datas[0].id.toString()) }
        })
        window.open(routeUrl.href, '_blank')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.head-btn {
  display: inline-block;
  width: 140px;
  height: 26px;
  text-align: center;
  line-height: 26px;
  color: #51abde;
  border: 1px solid #51abde;
  border-radius: 4px;

  cursor: pointer;
}
.channelInfo {
  .el-card__header {
    line-height: 1;
  }
  .el-col {
    line-height: 22px;
  }
  .channelInfo-left {
    height: 100%;
    .el-col {
      line-height: 22px;
    }
  }
}

.el-button-isval {
  color: #fff;
  background: #e6a23c;
  border-color: #e6a23c;
}

.el-button-isval-f {
  color: #e6a23c;
  background: #fdf6ec;
  border-color: #f5dab1;
}

.comment-main {
  margin-top: 6px;
  padding: 10px;
  background: #fafafa;
}
.bg-ghostwhite {
  background-color: ghostwhite;
}
</style>

<style lang="scss">
.waybillDetails {
  .el-rate {
    height: auto;
  }
  .el-rate__icon {
    font-size: 30px;
  }
  .el-card__header {
    line-height: 1;
  }
}
.bg-ghostwhite {
  background-color: ghostwhite;
}
.abroad-btn {
  position: absolute;
    top: 17px;
    left: 18%;
    z-index: 12;
    font-size: 14px;
    cursor: pointer;
}
</style>
